<template>
	<view>
		<view class="cover">
			<image src="" mode=""></image>
		</view>
		
			<view class="user">
				<u-avatar src="" @click="opShow=true"></u-avatar>
				<text>用户名</text>
			</view>
		
		<view class="myDiscern">
			<view class="title">
				我的识别：
			</view>
			<view class="item">
				<view class="time">
					8月21日
				</view>
				<image src="" mode=""></image>
				
			</view>
		</view>
			<u-popup v-model="opShow" width="400rpx">
			<view class="config">
			<view class="user">
				<u-avatar src=""></u-avatar>
				<view class="userInfo">
					<text>用户名</text>
				</view>
			</view>
			<view class="login">
				<u-button type="success" :ripple="true" ripple-bg-color="#909399" @click="toLogin">登录</u-button>
				<u-button type="error" :ripple="true" ripple-bg-color="#909399">退出登录</u-button>
			</view>
			</view>	
			</u-popup>
		<u-tabbar :list='this.$store.state.list' active-color='#2b85e4'></u-tabbar>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				opShow:false
			}
		},
		methods:{
			toLogin(){
				uni.navigateTo({
					url:'../login/index'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.cover{
		
		height: 400rpx;
		background-color: #18B566;
	}
	.user{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 170rpx;
		background-color: #2979FF;
	}
	
	.myDiscern{
		padding: 20rpx;
		.title{
			font-size: 40rpx;
			height: 60rpx;
			line-height: 60rpx;
			
		}
		.item{
			height: 300rpx;
			margin-bottom: 30rpx;
			background-color: #2C405A;
		
		}
		.time{
			height: 40rpx;
			font-size: 30rpx;
			font-weight: bold;
			line-height: 40rpx;
		}
	}
	
	.config{
		padding:20rpx;
	}
	
</style>
